<template>
	<view>
		<view class="w100 flex flex_jc flex_wrap">

			
			<view class="w710 li mt30"  v-for="(item,index) in rank_list">
				<view class="bg" v-if="index<=2">
					<image :src="'/static/images/rank'+(index+1)+'.jpg'" mode="aspectFill"></image>
				</view>
				<view class="box flex flex_ac">
					<view class="no ml20" :class="index<=2?'good'+(index+1):''" >{{index+1}}</view>
					<view class="avatar ml20 flex flex_ac flex_jc" :class="index<=2?'no'+(index+1):''">
						<image class="tag" v-if="index<=2" :src="'/static/images/no-'+(index+1)+'.png'"></image>
						<image class="icon" :src="item.avatar"></image>
					</view>
					<view class="name ml20 no hidden1"  :class="index<=2?'good'+(index+1):''">{{item.nickname}}</view>
					<view class="count no"  :class="index<=2?'good'+(index+1):''">{{item.ukapai_count}}</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {getRank} from "@/api/api"
	export default {
		data() {
			return {
				rank_list:[],
			}
		},
		
		
		onLoad: function (option) {
			this.getRank();
		},
		
		onShow:function(){
			
			
		},
	
		methods:{
			getRank(){
				getRank().then(res=>{
					if(res.code==0){
						this.rank_list = res.data
					}else{
						this.msg(res.msg)
					}
				})
			},
			msg(msg){
				uni.showToast({
					title: msg,
					icon:'none'
				});
			},
		}
	}
</script>
<style>
	.u-transition{width: 100%;height: 100%;}
	page{background-color: #F5F5F5;}
</style>
<style scoped>
	.li .box .count{width: 100rpx;margin-left: 20rpx;text-align: center;}
	.li .box .name{width: 380rpx;}
	.li .box .good1{color : #fd3a00;text-shadow: 0 0 10px #f1ee97,0 0 20px #f1ee97,0 0 30px #f1ee97,0 0 40px #f1ee97;}
	.li .box .good2{color : #12ffb2;text-shadow: 0 0 10px #efeee4,0 0 20px #efeee4,0 0 30px #efeee4,0 0 40px #efeee4;}
	.li .box .good3{color : #e82df5;text-shadow: 0 0 10px #e8c851,0 0 20px #e8c851,0 0 30px #e8c851,0 0 40px #e8c851;}
	.li .box .no{font-size: 50rpx;font-weight: bold;height : 80rpx;	line-height : 80rpx;}			
	.li .box .avatar .tag{width: 40rpx;height: 40rpx;position: absolute;right: -10rpx;top: -14rpx;transform: rotate(45deg);}
	.li .box .avatar .icon{width: 90rpx;height: 90rpx;border-radius: 100%;}
	.li .box .avatar{width: 105rpx;height: 105rpx;border-radius: 100%;position: relative;}
	.li .box{position: relative;width: 100%;height: 100%;z-index: 2;}
	.li .bg image{width: 100%;height: 100%;}
	.li .bg{width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 1;}
	.li{border-radius: 20rpx;height: 130rpx;position: relative;overflow: hidden;background-color: #FFFFFF;}
	
	
	
	.no1::after{width: 105rpx;height: 105rpx; background-image: linear-gradient( #f1ee97,#f3ed4d,#cec714 ); animation: spin 2.5s linear infinite;
		z-index: -1;position: absolute;content: '';border-radius: 100%;
		filter: blur(calc(10rpx));
		}
		
		
	.no2::after{width: 105rpx;height: 105rpx; background-image: linear-gradient( #efeee4,#d4d9dc,#ffffff ); animation: spin 2.5s linear infinite;
		z-index: -1;position: absolute;content: '';border-radius: 100%;
		filter: blur(calc(10rpx));
		}
		
	.no3::after{width: 105rpx;height: 105rpx; background-image: linear-gradient( #e8c851,#a78b27,#8e7314 ); animation: spin 2.5s linear infinite;
		z-index: -1;position: absolute;content: '';border-radius: 100%;
		filter: blur(calc(10rpx));
		}
	
	
	@keyframes spin{
		0%{
			transform: rotate(0);
		}
		100%{
			transform: rotate(359deg);
		}
	}
	
	
	@keyframes card_turn{
		0%{
			transform: rotateY(0deg);
		}
	
		
		100%{
			transform: rotateY(10799deg);
			z-index: 5;
			background-color: #FFFFFF;
		}
	
	}
</style>